<template>
  <view>
    <view class="about" @click="showPop" :style="{display:about}">
      <view class="content">
        <view class="img">
          <image src="../../static/images/index-icon/title.png"></image>
        </view>
        <view class="font">帮帮忙团队</view>
        <view class="font1">校 园 失 物 招 领 平 台</view>
        <view class="headImg">
          <image :src="headImg"></image>
        </view>
        <view class="font1">{{seek.issueName}}</view>
        <!-- <view class="font1">{{seek.callOrVx}}</view> -->
        <view class="font1">{{callOrVx}}</view>
        <view class="font2">请添加好友/通话 - 后介绍物品的详细信息,慎防诈骗</view>
      </view>
    </view>

    <view class="content">
      <view class="title">
        <view class="font">
          标题丨{{seek.title}}
        </view>
      </view>
      <view class="img">
        <image :src="seek.indexImg" mode="widthFix"></image>
        <!-- v-if="seek.seekImage!=''" -->
        <!--        <image src="../../static/images/img/noImg.png" v-else :style="{ width: '350rpx', height: '350rpx' }"></image> -->
      </view>

      <view class="text">
        备注丨{{seek.remarks}}
      </view>
    </view>

    <view class="user">
      <view class="headImg">
        <image :src="headImg"></image>
      </view>
      <view class="userName">{{seek.issueName}}</view>
      <view class="button" @click="showPop">联系方式</view>
      <!-- v-if="seek.upshot=='丢失'" -->
      <!--      <view v-else class="ok">
        <image src="../../static/images/index-icon/ok.png"></image>
      </view> -->
    </view>

    <view class="detail">
      <view class="title">物品详情丨</view>
      <!--  <view class="font1">物品类型：{{seek.seekNowThing}}</view>
      <view class="font1">认领状态：{{seek.upshot}}</view> -->
      <view class="font1">物品类型：刘备</view>
      <view class="font1">认领状态：丢失</view>
      <view class="image">
        <image src="../../static/images/index-icon/title.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        seek: {},
        about: "none",
        headImg: 'https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg?down',
        callOrVx: '158 8848钛金手机',
      }
    },
    methods: {
      onShow() {

      },

      async onLoad(option) {
        uni.showLoading({
          title: '数据加载中...',
        });
        console.log(option.id)
        const {
          data: res
        } = await uni.request({
          url: 'http://8.130.114.82:5555/bbm/loss/info/' + option.id
        })
        console.log(res)
        this.seek = res.loss
        uni.hideLoading()

      },

      showPop() {
        if (this.about === "none") {
          this.about = "block"
        } else {
          this.about = "none"
        }
      },

    }
  }
</script>

<style lang="scss">
  .about {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    height: 1500rpx;
    width: 100%;
  }

  .about .content {
    background-color: #fff;
    height: 850rpx;
    width: 90%;
    border-radius: 30rpx;
    margin: 0 auto;
    margin-top: 220rpx;
    text-align: center;
  }

  .about .content .img image {
    width: 150rpx;
    height: 150rpx;
    margin-top: 50rpx;
  }

  .about .content .font {
    font-weight: bold;
    font-size: 40rpx;
  }

  .about .content .font1 {
    color: #919191;
    margin-top: 20rpx;
    font-size: 30rpx;
  }

  .about .content .font2 {
    color: #919191;
    margin-top: 100rpx;
    font-size: 24rpx;
  }

  .about .content .headImg image {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    margin-top: 130rpx;
  }

  /* 正文内容 */

  .content {
    background-color: #fff;
    border-radius: 30rpx;
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
    padding-bottom: 40rpx;
  }

  .content .title {
    width: 90%;
    font-size: 42rpx;
    margin-top: 20rpx;
    margin-left: 40rpx;
    font-weight: bold;
    /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis; */
  }

  .content .img image {
    width: 90%;
    border-radius: 30rpx;
    margin: 30rpx;
  }

  .content .text {
    margin-left: 30rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.753);
  }

  /* 用户界面 */
  .user {
    border-radius: 30rpx;
    width: 90%;
    height: 180rpx;
    background-color: #fff;
    margin: 20rpx auto;
    display: flex;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
  }

  .user .headImg image {
    width: 100rpx;
    height: 100rpx;
    margin-top: 40rpx;
    margin-left: 40rpx;
    border-radius: 50%;
    border: gray 5rpx solid;
  }

  .user .userName {
    font-size: 36rpx;
    margin-top: 70rpx;
    margin-left: 10rpx;
  }

  .user .button {
    border-radius: 30rpx;
    margin-top: 60rpx;
    margin-left: 210rpx;
    height: 65rpx;
    width: 170rpx;
    font-weight: bold;
    text-align: center;
    line-height: 65rpx;
    background-color: #ffeb37;
  }

  .user .button1 {
    border-radius: 30rpx;
    margin-top: 60rpx;
    margin-left: 210rpx;
    height: 65rpx;
    width: 170rpx;
    font-weight: bold;
    text-align: center;
    line-height: 65rpx;
    background-color: #cecece;
  }

  .detail {
    border-radius: 30rpx;
    background-color: #fff;
    margin: 40rpx;
    width: 300rpx;
    height: 350rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
  }

  .detail .title {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 38rpx;
  }

  .detail .font1 {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 28rpx;
  }

  .detail .image image {
    width: 120rpx;
    height: 120rpx;
    margin-left: 30rpx;
    margin-top: 15rpx;
  }

  .ok image {
    width: 130rpx;
    height: 130rpx;
    margin-left: 300rpx;
    margin-top: 26rpx;
  }
</style>